<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@include file="/WEB-INF/inc.jsp" %>
<!DOCTYPE>
<html>
<head>
    <title>成都文理学院思想政治理论水平在线测试</title>
    <link rel="shortcut icon" href="<%=contextPath%>/images/favicon.ico">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

    <link href="<%=contextPath%>/assets/bootstrap/css/bootstrap.min.css" rel="stylesheet"
          type="text/css"/>
    <link href="<%=contextPath%>/assets/bootstrap/css/theme.css" rel="stylesheet"
          type="text/css"/>
    <link href="<%=contextPath%>/assets/sweetalert/sweetalert.css" rel="stylesheet"
          type="text/css"/>
    <script src="<%=contextPath%>/js/jquery-1.11.3.min.js"></script>
    <script src="<%=contextPath%>/assets/bootstrap/js/bootstrap.min.js" rel="stylesheet"
            media="screen"></script>
    <script src="<%=contextPath%>/assets/sweetalert/sweetalert.min.js" rel="stylesheet"
            media="screen"></script>
    <script type="text/javascript" src="../js/layer/layer.js"></script>
    <style>
        body {
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            -khtml-user-select: none;
            user-select: none;
        }

        .cssfont1 {
            font-size: 31px;
            margin-top: -7px;
            color: red;
            font-family: 宋体;
        }

        .cssfont2 {
            font-size: 12.5px
        }
    </style>
</head>
<body>
<div align="center" style="background-color: White">
    <img src="<%=contextPath%>/images/logo.png"/>
</div>
<div class="row-fluid">
    <div class="container-fluid">
        <div class="span4 examcontent">
            <div class="exambox">
                <div class="examform">
                    <ul class="unstyled">
                        <li>
                            <h6>
                                <div class="cssfont2">
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;共 <span
                                        class="allquestionnumber">${questionNum.danxuanNum+questionNum.duoxuanNum+questionNum.panduanNum}</span>
                                    题 总分：<span class="orange">100</span>分
                                    合格分数线：<span class="orange">${user_in_session.pass}</span>分
                                    考试时间：${EXAMTIME_IN_SESSION}分钟
                                </div>
                            </h6>
                        </li>
                    </ul>
                    <h5 class="title">
                        单选题</h5>

                    <ul class="unstyled inline">
                        <c:forEach items="${ questions}" var="qo" begin="0" end="${questionNum.danxuanNum-1}"
                                   varStatus="status">

                            <c:choose>
                                <c:when test='${empty qo.answer}'>
                                    <a id="btn_${status.index+1 }" class="btn" style="width: 20px;"
                                       onclick="selectTest(${status.index+1 },${qo.answerId })">${status.index+1 }</a>
                                </c:when>
                                <c:otherwise>
                                    <a id="btn_${status.index+1 }" class="btn btn-primary" style="width: 20px;"
                                       onclick="selectTest(${status.index+1 },${qo.answerId })">${status.index+1 }</a>
                                </c:otherwise>
                            </c:choose>

                        </c:forEach>
                    </ul>
                    <h5 class="title">
                        多选题</h5>
                    <ul class="unstyled inline">
                        <c:forEach items="${ questions}" var="qo" begin="${questionNum.danxuanNum}"
                                   end="${questionNum.danxuanNum + questionNum.duoxuanNum - 1}" varStatus="status">
                            <c:choose>
                                <c:when test='${empty qo.answer}'>
                                    <a id="btn_${status.index+1 }" class="btn" style="width: 20px;"
                                       onclick="selectTest(${status.index+1 },${qo.answerId })">${status.index+1 }</a>
                                </c:when>
                                <c:otherwise>
                                    <a id="btn_${status.index+1 }" class="btn btn-primary" style="width: 20px;"
                                       onclick="selectTest(${status.index+1 },${qo.answerId })">${status.index+1 }</a>
                                </c:otherwise>
                            </c:choose>
                        </c:forEach>
                    </ul>
                    <h5 class="title">
                        判断题</h5>
                    <ul class="unstyled inline">
                        <c:forEach items="${questions}" var="qo"
                                   begin="${questionNum.danxuanNum + questionNum.duoxuanNum}"
                                   end="${questionNum.danxuanNum + questionNum.duoxuanNum + questionNum.panduanNum -1}"
                                   varStatus="status">
                            <c:choose>
                                <c:when test='${empty qo.answer}'>
                                    <a id="btn_${status.index+1 }" class="btn" style="width: 20px;"
                                       onclick="selectTest(${status.index+1 },${qo.answerId })">${status.index+1 }</a>
                                </c:when>
                                <c:otherwise>
                                    <a id="btn_${status.index+1 }" class="btn btn-primary" style="width: 20px;"
                                       onclick="selectTest(${status.index+1 },${qo.answerId })">${status.index+1 }</a>
                                </c:otherwise>
                            </c:choose>
                        </c:forEach>
                    </ul>
                </div>
            </div>
        </div>
        <div class="span8 examcontent">
            <div class="exambox">
                <div class="examform">
                    <div class="container-fluid footcontent">

                        <div class="span7">
                            <ul class="unstyled">
                                <div class="cssfont1"><b>${user_in_session.examName}</b></div>
                                <li>
                                    <h6>
                                        编号：${user_in_session.idx}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                        姓名：${user_in_session.name}<br>
                                        年级专业：${user_in_session.grade}级${user_in_session.major}
                                    </h6>
                                </li>
                            </ul>
                        </div>
                        <div class="span3">
                            <ul class="unstyled">
                                <li>
                                    <h4>
                                        距考试结束：<span class="orange" id="time"></span></h4>
                                </li>
                            </ul>
                        </div>
                        <div class="span2">
                            <a id="submitExam" class="btn btn-danger" onclick="advanceSubmit()" id="submit">交卷</a>
                        </div>
                    </div>
                    <div class="paperexamcontent" id="question_396">

                        <c:forEach items="${questions }" var="q" varStatus="status">
                            <div id="question_${ status.index+1}_${ q.answerId}" style="display: none;margin-top: 15px"
                                 class="media well">
                                <c:if test="${q.type == 1 }">
                                    <h4 class="">单选题（每题有且只有一个选项）</h4>
                                    <div class="media-body well " style="font-weight: bold;color: black;">
                                        <h4>${ status.index+1}. ${q.intro}</h4>
                                    </div>
                                    <div class="media-body well" style="color: black;">
                                        <p>
                                            A.&nbsp;${q.optionA }</p>
                                        <p>
                                            B.&nbsp;${q.optionB }</p>
                                        <p>
                                            C.&nbsp;${q.optionC }</p>
                                        <p>
                                            D.&nbsp;${q.optionD }</p>
                                    </div>
                                    <div class="media-body well">
                                        <label class="radio inline">
                                            <input type="radio"
                                                   <c:if test="${fn:contains(q.answer, 'A')}">checked="checked"</c:if>
                                                   name="danxuan_${status.index }" value="A">A
                                        </label>
                                        <label class="radio inline">
                                            <input type="radio"
                                                   <c:if test="${fn:contains(q.answer, 'B')}">checked="checked"</c:if>
                                                   name="danxuan_${status.index }" value="B">B
                                        </label>
                                        <label class="radio inline">
                                            <input type="radio"
                                                   <c:if test="${fn:contains(q.answer, 'C')}">checked="checked"</c:if>
                                                   name="danxuan_${status.index }" value="C">C
                                        </label>
                                        <label class="radio inline">
                                            <input type="radio"
                                                   <c:if test="${fn:contains(q.answer, 'D')}">checked="checked"</c:if>
                                                   name="danxuan_${status.index }" value="D">D
                                        </label>
                                    </div>
                                </c:if>
                                <c:if test="${q.type==2 }">
                                    <h4 class="">不定项选择（每题有一个或者多个选项）</h4>
                                    <div class="media-body well " style="font-weight: bold;color: black;">
                                        <h4>  ${ status.index+1}.${q.intro}</h4>
                                    </div>
                                    <div class="media-body well" style="color: black;">
                                        <p>
                                            A、${q.optionA }</p>
                                        <p>
                                            B、${q.optionB }</p>
                                        <p>
                                            C、${q.optionC }</p>
                                        <p>
                                            D、${q.optionD }</p>
                                    </div>
                                    <div class="media-body well">

                                        <label class="checkbox inline">
                                            <input type="checkbox"
                                                   <c:if test="${fn:contains(q.answer, 'A')}">checked="checked"</c:if>
                                                   name="duoxuanA" value="A"/>A
                                        </label>
                                        <label class="checkbox inline">
                                            <input type="checkbox"
                                                   <c:if test="${fn:contains(q.answer, 'B')}">checked="checked"</c:if>
                                                   name="duoxuanB" value="B"/>B
                                        </label>
                                        <label class="checkbox inline">
                                            <input type="checkbox"
                                                   <c:if test="${fn:contains(q.answer, 'C')}">checked="checked"</c:if>
                                                   name="duoxuanC" value="C"/>C
                                        </label>
                                        <label class="checkbox inline">
                                            <input type="checkbox"
                                                   <c:if test="${fn:contains(q.answer, 'D')}">checked="checked"</c:if>
                                                   name="duoxuanD" value="D"/>D
                                        </label>
                                    </div>
                                </c:if>
                                <c:if test="${q.type==3 }">
                                    <h4 class="">判断题</h4>
                                    <div class="media-body well " style="font-weight: bold;color: black;">
                                        <h4> ${ status.index+1}.${q.intro}</h4>
                                    </div>
                                    <div class="media-body well" style="color: black;">
                                        <label class="radio inline">
                                            <input type="radio"
                                                   <c:if test="${q.answer == 'A' }">checked="checked"</c:if>
                                                   name="panduan_${status.index }" value="A">对
                                        </label>
                                        <label class="radio inline">
                                            <input type="radio"
                                                   <c:if test="${q.answer == 'B' }">checked="checked"</c:if>
                                                   name="panduan_${status.index }" value="B"/>错
                                        </label>
                                    </div>
                                </c:if>
                                <ul>
                                    <li class="btn-group pull-right">
                                        <a class="btn" onclick="preTest(this,${q.answerId})">上一题</a>
                                        <a class="btn btn-info" onclick="nextTest(this,${q.answerId})">下一题</a>
                                    </li>
                                </ul>
                            </div>
                        </c:forEach>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<input type="hidden" id="currentTime" value="${user_in_session.surExamTime*60 } "/>
<div class="row-fluid">
    <div class="container-fluid logfooter">
        <ul class="inline unstyled" style="background-color: white;">
            <li><a href="http://phpems.net">成都文理学院党校</a></li>
        </ul>
    </div>
</div>
<script type="text/javascript">

    function sessionTimeout() {
        var label = document.getElementById("currentTime");

        var seconds = sessionStorage.nextTime != null ? sessionStorage.nextTime : parseInt(label.value);
        seconds = seconds - 1;
        sessionStorage.nextTime = seconds;
        label.value = seconds;
        var time = $("#time");
        if (seconds % 60 < 10) {
            time.html(Math.floor(seconds / 60) + ":0" + seconds % 60);
        } else {
            time.html(Math.floor(seconds / 60) + ":" + seconds % 60);
        }
        if (seconds == 0) {
            //layer
            /* layer.confirm('时间到！', {
                  icon:6,
                  btn: ['确定'] //按钮
                }, function(){
                  submit();
                }); layer非阻塞。。。。*/
            alert("时间到！");
            submit();
        }
    }

    window.setInterval(sessionTimeout, 1000);

    function submit() {
        var div = $(".media:visible");
        var check = div.find("input:checked");
        var answer = "";
        var arr = div.attr("id").split("_");
        $.each(check, function (i, o) {
            $("#btn_" + arr[1]).attr("class", "btn btn-primary");
            answer += $(o).val();
        })
        $("#submit").attr('disabled', "true");
        sessionStorage.removeItem("nextTime");
        $.ajax({
            url: "<%=contextPath%>/submit",
            type: "POST",
            data: "answer=" + answer + "&answerId=" + arr[2] + "&currentTime=" + $("#currentTime").val(),
            success: function (msg) {
                location.href = "<%=contextPath%>/index";
            }
        })
    }

    function advanceSubmit() {
        swal({
                title: "确定要交卷吗？ ",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                closeOnConfirm: false
            },
            function () {
                var div = $(".media:visible");
                var check = div.find("input:checked");
                var answer = "";
                var arr = div.attr("id").split("_");
                $.each(check, function (i, o) {
                    $("#btn_" + arr[1]).attr("class", "btn btn-primary");
                    answer += $(o).val();
                })
                sessionStorage.removeItem("nextTime");
                $("#submit").attr('disabled', "true");
                $.ajax({
                    url: "<%=contextPath%>/submit",
                    type: "POST",
                    data: "answer=" + answer + "&answerId=" + arr[2] + "&currentTime=" + $("#currentTime").val(),
                    success: function (msg) {
                        location.href = "<%=contextPath%>/index";
                    }
                })
            });

    }

    $(function () {
        $(".media:first").show();
        $(document).bind("contextmenu", function (e) {
            return false;
        });
        $(document).bind("cut copy paste", function (e) {
            e.preventDefault();
        });
    });

    function preTest(obj, answerId) {
        var parentDiv = $(obj).parents(".media");
        var check = parentDiv.find("input:checked");
        var answer = "";
        $.each(check, function (i, o) {
            $("#btn_" + parentDiv.attr("id").split("_")[1]).attr("class", "btn btn-primary");
            answer += $(o).val();
        })
        if (check.length != 0) {
            $.ajax({
                url: "<%=contextPath%>/submitTest",
                type: "POST",
                data: "answer=" + answer + "&answerId=" + answerId + "&currentTime=" + $("#currentTime").val(),
                success: function (msg) {

                }
            })
        }
        var preDiv = parentDiv.prev();
        if (preDiv.length != 0) {
            parentDiv.hide();
            preDiv.show();
        }
    }

    function Test(obj, answerId) {
        var parentDiv = $(obj).parents(".media");
        var check = parentDiv.find("input:checked");
        var answer = "";
        $.each(check, function (i, o) {
            $("#btn_" + parentDiv.attr("id").split("_")[1]).attr("class", "btn btn-primary");
            answer += $(o).val();
        })
        if (check.length != 0) {
            $.ajax({
                url: "<%=contextPath%>/submitTest",
                type: "POST",
                data: "answer=" + answer + "&answerId=" + answerId + "&currentTime=" + $("#currentTime").val(),
                success: function (msg) {

                }
            })
        }
        var nextDiv = parentDiv.next();
        if (nextDiv.length != 0) {
            parentDiv.hide();
            nextDiv.show();
        }
    }

    function nextTest(obj, answerId) {
        var parentDiv = $(obj).parents(".media");
        var check = parentDiv.find("input:checked");
        var answer = "";
        $.each(check, function (i, o) {
            $("#btn_" + parentDiv.attr("id").split("_")[1]).attr("class", "btn btn-primary");
            answer += $(o).val();
        })
        if (check.length != 0) {
            $.ajax({
                url: "<%=contextPath%>/submitTest",
                type: "POST",
                data: "answer=" + answer + "&answerId=" + answerId + "&currentTime=" + $("#currentTime").val(),
                success: function (msg) {

                }
            })
        }
        var nextDiv = parentDiv.next();
        if (nextDiv.length != 0) {
            parentDiv.hide();
            nextDiv.show();
        }
    }

    function selectTest(obj, answerId) {
        var div = $(".media:visible");
        var check = div.find("input:checked");
        var answer = "";
        $.each(check, function (i, o) {
            $("#btn_" + div.attr("id").split("_")[1]).attr("class", "btn btn-primary");
            answer += $(o).val();
        })
        var arr = div.attr("id").split("_");
        if (check.length != 0) {
            $.ajax({
                url: "<%=contextPath%>/submitTest",
                type: "POST",
                data: "answer=" + answer + "&answerId=" + arr[2] + "&currentTime=" + $("#currentTime").val(),
                success: function (msg) {

                }
            })
        }

        $(".media").hide();

        $("#question_" + obj + "_" + answerId).show();
    }
</script>
</body>
</html>